import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { _HttpClient, ModalHelper } from '@delon/theme';
import { STColumn, STComponent, STColumnTag } from '@delon/abc/table';
import { SFSchema, SFComponent } from '@delon/form';
import { Chart } from '@antv/g2';
import { GridComponent, HttpService } from 'lbf';
import { NzMessageService } from 'ng-zorro-antd';

@Component({
  selector: 'app-jgyj-csrytj',
  templateUrl: './csrytj.component.html',
})
export class JgyjCsrytjComponent implements OnInit {
  queryFormData = {}; 
  private chart: any;
  private chart1: any;
  public num ='0';   
  data=[];
  gridData = [];
  csxmzb: number ;
  jqbjsl = [];
  ln_num=0;

  constructor(private http: _HttpClient, 
    private modal: ModalHelper,
    private lbs: HttpService,
    public msgSrv: NzMessageService) { }

  @ViewChild('chart1', { static: false })  private node: ElementRef;  
  @ViewChild('chart', { static: false })  private line: ElementRef;  
  @ViewChild('st', { static: true }) st: GridComponent;
  @ViewChild('searchForm', { static: false }) searchForm: SFComponent; 

  TAG: STColumnTag = {
    1: { text: '正常', color: 'green' },
    2: { text: '将到期', color: 'orange'},
    3: { text: '黄牌', color: 'yellow' },
    4: { text: '红牌', color: 'red' },
  };
 
  columns: STColumn[] = [
    { title: '机构', index: 'DGB021'},
    { title: '科室', index: 'DGB041'},
    { title: '岗位', index: 'RNAME' },
    { title: '对应事项', index: 'DAD017' },
    { title: '对应子项', index: 'DAE001' },
    { title: '对应环节', index: 'DAD090' ,dic: 'DAD090' },
    { title: '超时数量', index: 'CSSL' } 
  ];
  
  cxxmzb() {
    this.lbs.lbservice("cssxtj_cszb", { para: {} }).then(resdata => {
      if (resdata.code < 1) {
        this.msgSrv.error(resdata.errmsg);
      }
      else
      {
        this.csxmzb = resdata.message.list[0].CSZB;
        // console.log('this.csxmzb',this.csxmzb)        
      }
    });
  }
  
  cxjqbjsl(){
    this.lbs.lbservice("csrytj_jqbjsl", { para: {} }).then(resdata => {
    if (resdata.code < 1) {
      this.msgSrv.error(resdata.errmsg);
    }
    else
    {
      this.jqbjsl = resdata.message.list;
      console.log('this.jqbjsl',resdata.message)        
    }
  });}
  
  ngOnInit(){
    /*setTimeout(() => {
      // location.reload();
       opener.reload();
      // this.chart.reload();
    }, 60000); */
  }

  // tslint:disable-next-line: use-lifecycle-interface
  ngAfterViewInit() {
    // Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    // Add 'implements AfterViewInit' to the class.    
    setTimeout(() => {
      this.cxxmzb()
    }, 1);     
  } 

  click(){
    this.Queryforchart();
    if(!this.data){
    setTimeout(() => {
      this.chartrender();
    }, 100);}
    this.linerender();
  }
  
  Queryforchart(){ 
    this.lbs.lbservice("csrytj_sxchart", { para: {} }).then(resdata => {
      if (resdata.code < 1) {
        this.msgSrv.error(resdata.errmsg);
      }
      else
      { 
        // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。     
        this.data =resdata.message.list;
        this.ln_num = resdata.message.list.length;        
        return this.data;
      }
    });
  }

  chartrender() {
    if(this.num === '0'){ 
      const { node } = this;
      const container = node.nativeElement as HTMLElement;
      this.num = '1';   
      // Step 1: 创建 Chart 对象    
      this.chart1 = (this.chart1 = new G2.Chart({
        container, // 指定图表容器 ID
        width : this.ln_num * 250, // 指定图表宽度
        height : 500, // 指定图表高度
        forceFit: false,  // 自动宽度
        padding: [ 80, 70, 80, 70 ] // 上，右，下，左边距
      })) 
      this.chart1.axis(true);  // 带坐标轴
      // Step 2: 载入数据源
      this.chart1.source(this.data);
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      this.chart1.interval().position('DGB041*CSSL').color('DGB041')
      // Step 4: 渲染图表    
      this.chart1.render();       
    }
    else
    {  
      this.chart1.source(this.data); 
      // console.log('thsi.data2',this.data);
      this.chart1.interval().position('DGB041*CSSL').color('DGB041')
      this.chart1.render();
    }
  }
  
  linerender(){
    const { line } = this;
    const container = line.nativeElement as HTMLElement;      
    // Step 1: 创建 Chart 对象    
    this.chart = (this.chart1 = new G2.Chart({
      container, // 指定图表容器 ID      
      width : 1200, // 指定图表宽度
      height : 500, // 指定图表高度 
      padding: [ 80, 70, 80, 70 ] // 上，右，下，左边距
    })) 
    // this.chart.axis(true);  // 带坐标轴
    
    this.chart.tooltip({
        showCrosshairs: false, // 展示 Tooltip 辅助线
      }); 
    // Step 2: 载入数据源
    this.cxjqbjsl();
       
    setTimeout(() => {      

      this.chart.source(this.jqbjsl);
      this.chart.scale({
        日期: {
          range: [0, 1],
        },
        办结数量: {
          min: 0,
          nice: true,
        },
      });

      this.chart.line().position('日期*办结数量').label('办结数量'); // 画线
      this.chart.point().position('日期*办结数量');// 画折线上的坐标点
      this.chart.render();
    }, 500);
  }  
}
